<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back fixed>
				<view slot="title">
					<view id="title" class="fw-bolder"></view>
				</view>
				<view slot="tools">
					
				</view>
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view id="address">
				<view class="address d-padding">
					<view class="address_box section">
						<view class="address_info">
							<view class="infos d-flex align-items-center">
								<view class="name fw-bolder">{{renders.address.contact_name}}</view>
								<view class="mobile fw-bolder">{{renders.address.contact_mobile}}</view>
							</view>
							<view class="fulls d-flex align-items-baseline">
								<view class="full vice_text">{{renders.address.full_address}}</view>
							</view>
						</view>
						<view class="address_bottom">
							<u--image :src="renders.express_img" width="690rpx" height="8rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="image">
							  <template v-slot:loading>
								 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
							  </template>
							  <template v-slot:error>
								 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
							  </template>
							</u--image>
						</view>
					</view>
				</view>
			</view>
			<view id="goods">
				<view class="goods d-padding">
					<view class="goods_box">
						<view class="item section">
							<view class="item_box d-flex align-items-center">
								<view class="cover_box">
									<u--image :src="renders.good.goods_cover" width="190rpx" height="190rpx" radius="20rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
									  <template v-slot:loading>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
								<view class="infos">
									<view class="title fw-bolder u-line-2">{{renders.good.goods_title}}</view>
									<view class="specifition vice_text fw-bold">{{renders.good.goods_specification_name}} x {{renders.good.total_goods_count}}</view>
									<view class="price fw-bolder color">¥{{(renders.good.unit_good_amount/100).toFixed(2)}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="after_sale" v-if="renders.after_sale.enable">
				<view class="after_sale d-padding">
					<view class="after_sale_box d-flex justify-content-between align-items-center section" @click="navigateAction('account.orders.refund', renders.after_sale.params)">
						<view class="left fw-bolder">{{renders.after_sale.title}}</view>
						<view class="right color fw-bolder">立即查看</view>
					</view>
				</view>
			</view>
			<view id="infos" v-if="renders.infos.enable">
				<view class="infos d-padding">
					<view class="infos_box section">
						<view class="title fw-bolder">{{renders.infos.title}}</view>
						<view class="lines">
							<view class="line d-flex justify-content-between align-items-center" v-for="(line, index) in renders.infos.lists" :key="index">
								<view class="name fw-bolder">{{line.name}}</view>
								<view class="text vice_text">{{line.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="expresses" v-if="renders.expresses.enable">
				<view class="expresses d-padding">
					<view class="expresses_box section">
						<view class="title fw-bolder">{{renders.expresses.title}}</view>
						<view class="lines">
							<view class="line d-flex justify-content-between align-items-center" v-for="(line, index) in renders.expresses.lists" :key="index">
								<view class="name fw-bolder">{{line.name}}</view>
								<view class="text vice_text">{{line.text}} <span class="color fw-bolder" @click="clipboardData(line.text)">复制</span></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="discounts" v-if="renders.discounts.enable">
				<view class="discounts d-padding">
					<view class="discounts_box section">
						<view class="title fw-bolder">{{renders.discounts.title}}</view>
						<view class="lines">
							<view class="line d-flex justify-content-between align-items-center" v-for="(line, index) in renders.discounts.lists" :key="index">
								<view class="name fw-bolder">{{line.name}}</view>
								<view class="text vice_text fw-bolder">¥ {{line.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="footer">
				<view class="footer nav_bg d-padding">
					<view class="footer_box">
						<view class="line d-flex justify-content-between align-items-center">
							<view class="name vice_text">商品总额</view>
							<view class="price vice_text fw-bolder">¥{{(renders.amounts.goods_amount/100).toFixed(2)}}</view>
						</view>
						<view class="line d-flex justify-content-between align-items-center">
							<view class="name vice_text">物流金额</view>
							<view class="price vice_text fw-bolder">¥{{(renders.amounts.express_amount/100).toFixed(2)}}</view>
						</view>
						<view class="line d-flex justify-content-between align-items-center">
							<view class="name vice_text">优惠金额</view>
							<view class="price vice_text fw-bolder">-¥{{(renders.amounts.discount_amount/100).toFixed(2)}}</view>
						</view>
						<view class="line total_price d-flex justify-content-between align-items-center">
							<view class="name fw-bolder">共计</view>
							<view class="price color fw-bolder">¥{{(renders.amounts.pay_amount/100).toFixed(2)}}</view>
						</view>
						<view class="button fw-bold bg text-center w-fill-available" v-for="(button, b_index) in renders.buttons" :key="b_index" @click="buttonAction(button.action, renders.params)" v-if="button.active">{{button.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="shows.services" @close="shows.services = false" mode="center" :closeOnClickOverlay="true" bgColor="transparent" :customStyle="{width: '100%'}">
			<view class="domxee_popup d-padding">
				<view class="section" id="services_popup">
					<view class="popup_close" @click="shows.services = false"><view class="domxee_icon">&#xe619;</view></view>
					<view class="title fw-bolder main_text text-center">{{renders.popups.services.title}}</view>
					<view class="descriptions">
						<view class="desc text-center" v-for="(service, index) in renders.popups.services.lists" :key="index">{{service}}</view>
					</view>
				</view>
				<view class="contact d-padding" id="services_popup_contact">
					<view class="contact_button button_bg text-center fw-bold" @click="callPhone(renders.popups.services.tel)">拨打电话</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {
					services: false,
				},
				renders: {
					params: {},
					address: {},
					express_img: '',
					good: {},
					popups: {services: {title: '', lists: [], tel: ''}},
					status: '',
					buttons: [],
					infos: {enable: false, title: '', lists: []},
					discounts: {enable: false, title: '', lists: []},
					expresses: {enable: false, title: '', lists: []},
					amounts: {goods_amount: 0, express_amount: 0, discount_amount: 0, pay_amount: 0},
					after_sale: {enable: false, title: '', params: {}}
				},
				data: {
					sections: {

					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
			},
			callPhone: function(mobile) {
				//拨打电话
				uni.makePhoneCall({
					phoneNumber: mobile
				})
			},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;
				//发起请求
				that.nii_common.request.build('orders/detail_information', that.options, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置数据
					that.renders = res.data;
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
					//返回订单列表
					setTimeout(function () {that.navigateAction('account.orders')}, 1500);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);	
			},
			buttonAction: function (action, params) {
				//获取对象
				const that = this;
				//根据操作方式处理
				switch (action) {
					case 'pay':
					//跳转收银台
					that.navigateAction('cashier', params);
					break;
					case 'refund':
					//跳转收银台
					that.navigateAction('account.orders.refund', params);
					break;
					case 'cancel':
						//弹窗提示
						uni.showModal({
							title: '温馨提示',
							content: '请确认是否取消该订单？',
							confirmColor: that.globalData.colors.theme.color,
							confirmText: '确定',
							cancelText: '取消',
							success:function(res){
								//判断是否确认
								if (res.confirm) {
									//loading
									that.nii_common.toastLoading('正在取消...');
									//发起请求
									that.nii_common.request.build('app/orders/cancel', params, 'POST', function (res) {
										//提示成功
										that.nii_common.toastAlert('取消成功', 'success');
									}, function (res) {
										//提示错误
										that.nii_common.toastAlert(res.msg);
									}, function(res) {
										//隐藏loading
										that.nii_common.toastLoadingHide();
									}, true);	
								}
							}
						});
					break;
					case 'confirm':
						//弹窗提示
						uni.showModal({
							title: '温馨提示',
							content: '请确认是否已收到货物并确认收货？',
							confirmColor: that.globalData.colors.theme.color,
							confirmText: '确定',
							cancelText: '取消',
							success:function(res){
								//判断是否确认
								if (res.confirm) {
									//loading
									that.nii_common.toastLoading('正在确认...');
									//发起请求
									that.nii_common.request.build('app/orders/confirm', params, 'POST', function (res) {
										//提示成功
										that.nii_common.toastAlert('收货成功', 'success');
									}, function (res) {
										//提示错误
										that.nii_common.toastAlert(res.msg);
									}, function(res) {
										//隐藏loading
										that.nii_common.toastLoadingHide();
									}, true);	
								}
							}
						});
					break;
					default:
					//显示弹窗
					that.shows.services = true;
					break;
				}
			},
			clipboardData: function (text) {
				//获取对象
				const that = this;
				//复制内容
				that.nii_common.clipboardData(text);
			}
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		.domxee_icon {			
			font-size: 36rpx;
			line-height: 60rpx;
			margin-right: 20rpx;
		}
		.domxee_icon:last-child {
			margin-right: 0;
		}
	}
	#content_wrapper {
		padding-bottom: 530rpx;
		#address {
			margin-top: 30rpx;
			.address {
				.address_box {
					position: relative;
					padding: 30rpx 40rpx 50rpx 40rpx;
					border-radius: 20rpx;
					.address_bottom {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 8rpx;
					}
					.address_info {
						.infos {
							.name {
								font-size: 36rpx;
								line-height: 50rpx;
								margin-right: 40rpx;
							}
							.mobile {
								font-size: 36rpx;
								line-height: 50rpx;
							}
						}
						.fulls {
							margin-top: 20rpx;
							.full {
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
					}
				}
			}
		}
		#goods {
			margin-top: 20rpx;
			.goods {
				.goods_box {
					.item {
						margin-top: 20rpx;
						padding: 30rpx 20rpx;
						border-radius: 20rpx;
						.item_box {
							.cover_box {
								width: 190rpx;
								height: 190rpx;
								border-radius: 20rpx;
								margin-right: 20rpx;
							}
							.infos {
								.title {
									width: 410rpx;
									height: 80rpx;
									font-size: 28rpx;
									line-height: 40rpx;
								}
								.specifition {
									margin-top: 10rpx;
									font-size: 28rpx;
									line-height: 40rpx;
								}
								.price {
									margin-top: 12rpx;
									font-size: 26rpx;
									line-height: 36rpx;
								}
							}
						}
					}
				}
			}
		}
		#after_sale {
			margin-top: 20rpx;
			.after_sale {
				.after_sale_box {
					padding: 30rpx 40rpx;
					border-radius: 20rpx;
					.left {
						font-size: 30rpx;
						line-height: 42rpx;
					}
					.right {
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}
			}
		}
		#infos {
			margin-top: 20rpx;
			.infos {
				.infos_box {
					padding: 30rpx 40rpx 40rpx 30rpx;
					border-radius: 20rpx;
					.title {
						font-size: 32rpx;
						line-height: 44rpx;
					}
					.lines {
						margin-top: 40rpx;
						.line {
							margin-top: 30rpx;
							.name {
								font-size: 26rpx;
								line-height: 36rpx;
							}
							.text {
								text-align: right;
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
						.line:first-child {
							margin-top: 0;
						}
					}
				}
			}
		}
		#discounts {
			margin-top: 20rpx;
			.discounts {
				.discounts_box {
					padding: 30rpx 40rpx 40rpx 30rpx;
					border-radius: 20rpx;
					.title {
						font-size: 32rpx;
						line-height: 44rpx;
					}
					.lines {
						margin-top: 40rpx;
						.line {
							margin-top: 30rpx;
							.name {
								font-size: 26rpx;
								line-height: 36rpx;
							}
							.text {
								text-align: right;
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
						.line:first-child {
							margin-top: 0;
						}
					}
				}
			}
		}	
		#expresses {
			margin-top: 20rpx;
			.expresses {
				.expresses_box {
					padding: 30rpx 40rpx 40rpx 30rpx;
					border-radius: 20rpx;
					.title {
						font-size: 32rpx;
						line-height: 44rpx;
					}
					.lines {
						margin-top: 40rpx;
						.line {
							margin-top: 30rpx;
							.name {
								font-size: 26rpx;
								line-height: 36rpx;
							}
							.text {
								text-align: right;
								font-size: 24rpx;
								line-height: 34rpx;
								span {
									margin: 0 10rpx;
								}
							}
						}
						.line:first-child {
							margin-top: 0;
						}
					}
				}
			}
		}	
		#footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			.footer {
				.footer_box {
					padding: 40rpx;
					.line {
						margin-top: 20rpx;
						.name {
							font-size: 26rpx;
							line-height: 36rpx;
						}
						.price {
							font-size: 26rpx;
							line-height: 36rpx;
						}
					}
					.total_price {
						.name {
							font-size: 32rpx;
							line-height: 44rpx;
						}
						.price {
							font-size: 32rpx;
							line-height: 44rpx;
						}
					}
					.line:first-child {
						margin-top: 0;
					}
					.button {
						margin-top: 40rpx;
						padding: 20rpx 100rpx;
						border-radius: 40rpx;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
			}
		}
	}
	#services_popup {
		padding-bottom: 100rpx;
		.title {
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.descriptions {
			margin-top: 80rpx;
			.desc {
				margin-top: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.desc:first-child {
				margin-top: 0;
			}
		}
	}
	#services_popup_contact {
		width: 580rpx;
		margin: 40rpx auto 0 auto;
		.contact_button {
			padding: 28rpx;
			font-size: 32rpx;
			line-height: 44rpx;
		}
	}
</style>
